<template>
  <div>
    <div class="content content-table">
      <el-table
        ref="multipleTableRef"
        border
        :data="state.list"
        style="width: calc(100% - 20px)"
      >
        <el-table-column
          property="mingcheng"
          label="名称"
          width="100"
          align="center"
        />
        <el-table-column width="200" label="图片" align="center">
          <template #default="scope">
            <img
              v-if="scope.row.tupian && scope.row.tupian.length > 0"
              style="width: 100px; height: 100px; border-radius: 50%"
              :src="scope.row.tupian[0].filePath"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column
          width="140"
          label="类型"
          align="center"
        >
          <template #default="scope">
            <span>{{
              scope.row.leixing == 'yindaoyeleixing_lianjie' ? "链接" : "富文本"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column property="jieshao" label="介绍" align="center" />
        <el-table-column label="状态" width="140" align="center">
          <template #default="scope">
            <span v-if="scope.row.shangjia">{{
              scope.row.shangjia.code == 0 ? "已下架" : "已上架"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template #default="scope">
            <el-button
              style="min-width: auto"
              link
              type="primary"
              size="small"
              @click.prevent="onOperation(scope.row, 'edit')"
              >编辑</el-button
            >
            <el-button
              style="min-width: auto"
              link
              type="primary"
              size="small"
              @click.prevent="changeStatus(scope.row)"
              >{{
                scope.row.shangjia && scope.row.shangjia.code == 0
                  ? "上架"
                  : "下架"
              }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetNavigation, ChangeNavigation } from "@/api/system";
import { baseMsg } from "@/utils/utils";
const route = useRoute();
const router = useRouter();
const state = reactive({
  list: [],
});
const GetList = () => {
  GetNavigation().then((res) => {
    if (res.code == 4201) {
      state.list = res.data;
    }
  });
};
// 操作
const onOperation = (params, operation) => {
  if (operation === "edit") {
    router.push({
      path: `/xitongshezhi/yindaoye/info`,
      query: {
        id: params.id,
      },
    });
  }
};
// 上下架
const changeStatus = async (value) => {
  const res = await ChangeNavigation({ id: value.id });
  if (res.code === 4202) {
    baseMsg("操作成功");
    GetList();
  }
};
GetList();
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
  margin: 0 10px;
  background-color: transparent !important;
  padding-bottom: 30px;
  padding-top: 20px;
}
</style>
<style lang="scss">
.content-table .el-table__header th {
  background-color: #f2f9fc !important;
}
</style>
